<template>
    <div class="code-main">
        <van-nav-bar left-arrow @click-left="onClickLeft">
            <template #left>
                <van-icon :name="backicon" size="20"/>
            </template>
            <template #title>
                <span class="hometitle">推荐码</span>
            </template>
        </van-nav-bar>

        <div class="UserInfo-title">
            <a-avatar style="border:1px solid #fff;" :src="User.head_pic" :size="35">
            </a-avatar>
            <div class="user-id">ID:{{User.user_code}}</div>
        </div>


        <div class="code">
            <span>{{User.invite_code.substring(0,3)}}</span>
            <span>{{User.invite_code.substring(3,6)}}</span>
        </div>
        <img class="recmtitle" src="../../assets/img/recomtitle.png" alt="">


        <img class="wxcode" src="../../assets/img/code.png" alt="">

        <!-- <img class="sharebtn" src="../../assets/img/toshare.png" alt=""> -->
    </div>
</template>
<script>
import {_promoCode} from "../../service/proxy"
import {_getWxLogin,_WeChatLogin,_getjsapiticket} from '../../service/wxService.js'
import {_getSharePic} from '../../service/main'
export default {
    data(){
        let self=this
        return{
            backicon:require('../../assets/img/backicon.png'),
            User:{}
        }
    },
    mounted(){
        this.getDate()//获取数据
        try{
            this.UpdateShareDate()//分享
        }catch(e){

        }
    },
    methods:{
        async UpdateShareDate(){
            let _this=this
            let localhref=window.location.href
            let conf2,conf1

            await _getSharePic({id:3}).then(res=>{
                conf1={ 
                    title: "HALF GO", // 分享标题
                    desc: "躺赚  即刻开启副业赚钱 每单最高返佣30%", // 分享描述
                    link: localhref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: `http://www.starrymedia.vip${res.data.path}`, // 分享图标
                }

                conf2={ 
                    title: "HALF GO", // 分享标题
                    link: localhref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: `http://www.starrymedia.vip${res.data.path}`, // 分享图标
                }
            })

            await _getjsapiticket(localhref).then(res=>{
                console.log("_getjsapiticket",res)
                if(res.errcode==1){
                    // localStorage.setItem("WXjsapi_ticket",JSON.stringify(res.data))
                    wx.config({
                        debug: false, 
                        appId: res.data.appid, // 必填，公众号的唯一标识
                        timestamp: res.data.timestamp, // 必填，生成签名的时间戳
                        nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
                        signature: res.data.signature,// 必填，签名，见附录1
                        jsApiList: [
                            "updateAppMessageShareData","onMenuShareAppMessage",
                            "updateTimelineShareData","onMenuShareWeibo"
                        ]
                    });
                    setTimeout(()=>{
                        wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
                            wx.updateAppMessageShareData(conf1)
                            wx.updateTimelineShareData(conf2)
                            wx.onMenuShareWeibo(conf1);
                        });
                        wx.error(function(res){
                            // alert(JSON.stringify(res))
                        });
                    },400)
                }
            })
            
            
        },
        onClickLeft(){
            this.$router.go(-1)
        },
        getDate(){
            let uid=JSON.parse(localStorage.getItem("user")).user_id
            _promoCode({
                user_id:uid
            }).then(res=>{
                console.log(res)
                this.User=res.data
            })
        }
    }
}
</script>
<style lang="less" scoped>
.font-SC(){
    font-family: "PingFang SC","Microsoft YaHei";
}
.code-main{
    width: 100%;
    height: 100vh;
    overflow: auto;
    background-image: url("../../assets/img/code-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    .hometitle{
        font-size: 18px;
        .font-SC();
        font-weight: bold;
        color: #000;
        line-height: 46px;
    }
    
    .UserInfo-title{
        width: 100%;
        height: auto;
        padding-top: 75px;
        padding-left: 39px;
        .user-id{
            font-family: 'DINPro Medium';
            font-size: 12px;
            color: #fff;
            display: inline-block;
            height: 35px;
            line-height: 35px;
            padding-left: 15px;
        }
    }

    .code{
        width: 120px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-top: 88px;
        span{
            font-family: "DINPro-Bold";
            color: #fff;
            font-size: 30px;
        }
    }
    .recmtitle{
        display: block;
        width: 143px;
        margin: 18px auto;
    }

    .wxcode{
        width: 87px;
        display: block;
        margin: 84px auto 0 auto;
    }


    .sharebtn{
        width: 100%;
        display: block;
        // margin: 50px auto 0 auto;
        position: absolute;
        bottom: 0px;

    }


    @media only screen and (min-device-height: 600px) and (max-device-height: 675px){
        .UserInfo-title{
            width: 100%;
            height: auto;
            padding-top: 75px;
            padding-left: 39px;
            .user-id{
                font-family: 'DINPro Medium';
                font-size: 12px;
                color: #fff;
                display: inline-block;
                height: 35px;
                line-height: 35px;
                padding-left: 15px;
            }
        }

        .code{
            width: 120px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            margin-top: 34px;
            span{
                font-family: "DINPro-Bold";
                color: #fff;
                font-size: 30px;
            }
        }
        .recmtitle{
            display: block;
            width: 143px;
            margin: 18px auto;
        }

        .wxcode{
            width: 87px;
            display: block;
            margin: 34px auto 0 auto;
        }


        .sharebtn{
            width: 100%;
            display: block;
            // margin: 50px auto 0 auto;
            position: absolute;
            bottom: 0px;

        }
    }


}
</style>